<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script src="../../../../jquery.gamequery.js"></script>
        <script>
            $(function(){
                var simpleVerticalAnimation = new $.gameQuery.Animation({imageURL: "sv.png", type: $.gameQuery.ANIMATION_VERTICAL, numberOfFrame: 4, delta: 32, rate: 300});
                var simpleHorizontalAnimation = new $.gameQuery.Animation({imageURL: "sh.png", type: $.gameQuery.ANIMATION_HORIZONTAL, numberOfFrame: 4, delta: 32, rate: 300});
                
                var multiVerticalAnimation = new $.gameQuery.Animation({imageURL: "mv.png", type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_MULTI, numberOfFrame: 4, delta: 32, rate: 300, distance: 32});
                var multiHorizontalAnimation = new $.gameQuery.Animation({imageURL: "mh.png", type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI, numberOfFrame: 4, delta: 32, rate: 300, distance: 32});
                
                var simpleOffsetVerticalAnimation = new $.gameQuery.Animation({imageURL: "sov.png", type: $.gameQuery.ANIMATION_VERTICAL, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300});
                var simpleOffsetHorizontalAnimation = new $.gameQuery.Animation({imageURL: "soh.png", type: $.gameQuery.ANIMATION_HORIZONTAL, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300});
                
                var multiOffsetVerticalAnimation = new $.gameQuery.Animation({imageURL: "mov.png", type: $.gameQuery.ANIMATION_VERTICAL | $.gameQuery.ANIMATION_MULTI, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300, distance: 32});
                var multiOffsetHorizontalAnimation = new $.gameQuery.Animation({imageURL: "moh.png", type: $.gameQuery.ANIMATION_HORIZONTAL | $.gameQuery.ANIMATION_MULTI, offsetx: 100, offsety: 100, numberOfFrame: 4, delta: 32, rate: 300, distance: 32});
                
                $("#playground").playground({height: 50, width: 350});
                
                $.playground()
                    .addSprite("simpleVertical",{animation: simpleVerticalAnimation, posx: 0})
                    .addSprite("simpleHorizontal",{animation: simpleHorizontalAnimation, posx: 34})
                    .addSprite("multiVertical",{animation: multiVerticalAnimation, posx: 75})
                    .addSprite("multiHorizontal",{animation: multiHorizontalAnimation, posx: 109})
                    .addSprite("simpleOffsetVertical",{animation: simpleOffsetVerticalAnimation, posx: 150})
                    .addSprite("simpleOffsetHorizontal",{animation: simpleOffsetHorizontalAnimation, posx: 184})
                    .addSprite("multiOffsetVertical",{animation: multiOffsetVerticalAnimation, posx: 225})
                    .addSprite("multiOffsetHorizontal",{animation: multiOffsetHorizontalAnimation, posx: 259});
                
                $("#multiVertical").setAnimation(1);
                $("#multiHorizontal").setAnimation(1);
                $("#multiOffsetVertical").setAnimation(1);
                $("#multiOffsetHorizontal").setAnimation(1);
                
                $.playground().startGame();
            });
        </script>
    </head>
    <body>
        <h2>All of the following sprites should look the same, without any red visible:</h2>
        <div id="playground" style="width: 350px; height: 50px; background: white"></div>
    </body>
</html>